.note-class-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .note-class {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 0.5866rem;
        box-sizing: border-box;
        overflow-y: scroll;
        transform: translateX(0);
        transition: all 0.3s ease-in-out;

        header {
            display: flex;
            height: 1.2rem;
            align-items: center;
            justify-content: space-between;
            font-size: 24px;

            .icon {
                margin: 0 5px;
            }
        }

        section {
            width: 100%;

            .note-class-item {
                height: 3.2rem;
                border-radius: 0.3rem;
                margin-bottom: 0.64rem;
                box-shadow: 0 0 10px 2px #ccc;
                overflow: hidden;

                &-title {
                    display: block;
                    margin-top: 0.5333rem;
                    text-align: center;
                    font-size: 0.5333rem;
                    color: #fff;
                }
            }
        }
    }

    .menu {
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        transition: all 0.3s ease-in-out;
    }

    .hide {
        transform: translateX(100%);
    }

    .show {
        transform: translateX(0);
    }
}